<template>
  <div style="padding:25px;">
    <el-row>
      <el-col>
        <el-input style="width:220px;"></el-input>
        <el-button type="primary">添加一级菜单</el-button>添加子集可以鼠标右键行进行添加
      </el-col>
    </el-row>
    <el-row style="margin-top:20px;">
      <el-col :span="24">
        <el-card shadow="never">
          <treeTable
            :data="data"
            :eval-func="func"
            :expand-all="expandAll"
            :smallMenuList="smallMenuList"
            v-loading="loading"
            style="width:100%"
            @handleMenu="handleMenu"
          >
            <el-table-column prop="name" label="级别"></el-table-column>
            <el-table-column prop="depNme" label="名字"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </treeTable>
        </el-card>
      </el-col>
    </el-row>

    <!--  -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>{{obj.depNme}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import treeTable from "@/components/treeTable";
import treeToArray from "@/components/treeTable/customEval.js";
export default {
  components: {
    treeTable
  },
  data() {
    return {
      dialogVisible: false,
      isshow: false,
      loading: false,
      func: treeToArray,
      expandAll: true,
      smallMenuList: [
        {
          handleName: "handleAddMenu",
          text: "添加菜单"
        },
        {
          handleName: "handleDeleteMenu",
          text: "删除菜单"
        }
      ],
      obj: {},
      data: {
        name: "一级",
        depNme: "学校",
        children: [
          {
            name: "一级-1",
            depNme: "年级",
            children: [
              {
                name: "一级-1-1",
                depNme: "高一"
              },
              {
                name: "一级-1-2",
                depNme: "高二"
              }
            ]
          }
        ]
      }
    };
  },
  methods: {
    handleOpenDialog() {
      this.dialogVisible = true;
    },
    //右键菜单
    handleMenu(name, row) {
      if (this[name]) {
        this[name](row);
      }
    },
    handleAddMenu(row) {
      console.log(row);
      this.dialogVisible = true;
      this.obj = row;
    }
  }
};
</script>


<style scoped>
</style>
